<template>
  <!-- hover-class: 按压样式 -->
  <view class="box1" hover-class="boxHover">view布局标签</view>
  <!-- selectable: 文本是否可选 space: 是否显示连续空格 -->
  <text selectable space="emsp">这是一段 文本标签</text>
  <scroll-view scroll-x class="scroll X">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </scroll-view>
  <scroll-view scroll-y class="scroll Y">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </scroll-view>
  <!-- 重要属性 open-type 指定跳转方式 可返回 不可返回 -->
  <navigator url="/pages/demo1/demo1" open-type="reLaunch">跳转到demo1</navigator>
</template>

<script setup></script>

<style lang="scss">
  .box1 {
    width: 200px;
    height: 200px;
    background-color: #ccc;

  }

  .boxHover {
    background-color: orange;
  }

  .scroll {
    width: 80%;
    height: 300px;
    border: 1px solid crimson;
    white-space: nowrap;

    .box {
      width: 100px;
      height: 100px;
      background-color: #bfa;
      margin: 10px;
    }

    // 设置行内块 实现横向滑动
    &.X .box {
      display: inline-block;
    }
  }
</style>